<template>
    <div id="buy">
    <div class="fa fa-ravelry buy-bar"> <br><span>供应商</span></div>
    <div class="fa fa-heart-o buy-bar"> <br><span>关注</span></div>
    <div class="fa fa-shopping-cart buy-bar"> <br>
    <router-link to="/shopping">购物车</router-link>
    </div>

    <div class="buy-shopping buy-add" @click="addCartClick">加入购物车</div>
    <div class="buy-shopping buy-buy">立即购买</div>
    </div>
</template>

<script>

export default {
    methods: {
        addCartClick:function(){
            console.log(this.$route.params.id)
            this.$route.params.id;
            this.$store.dispatch("requstAddcart",{id:this.$route.params.id});
        }
    }
}
</script>

<style scoped>
    #buy{
        width: 100%;
        height: 45px;
        position: fixed;
        left: 0;
        bottom: 0;
        background-color: rgba(255,255,255,0.5);
        border-top: solid 1px gray;
        display: flex;
        justify-content: space-between;
        text-align: center;
        line-height: 45px;
    }
    .buy-bar{
        margin-top:5px;
        width: 16.66666666%;
        font-size: 16px;
    }
    .buy-bar span{
        font-size: 12px;
    }
    .buy-shopping{
        width: 25%;
        color: white;
        font-size: 12px;
    }
    .buy-add{
        background-color: orange;
    }
    .buy-buy{
        
        background-color: red;
    }
    a{
        text-decoration: none;
    }
</style>